<template>

	<div>

		<!-- 面包屑 陈明阳-->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>个人</el-breadcrumb-item>
			<el-breadcrumb-item>我的信息</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 陈明阳： @资料卡 @同班同学 -->
		<el-row :gutter="0">
			<!-- @资料卡 -->
			<el-col :span="12">
				<el-card class="card-cmy">

					<!-- 功能提示按钮 -->
					<div class="box">
						<div class="top">
							<el-tooltip class="item" effect="dark" content="基本信息 @陈明阳" placement="top">
								<el-button>资 料 卡</el-button>
							</el-tooltip>
						</div>
					</div>

					<!-- 用户信息表单 不可修改-->
					<el-table border :data="tableInfo">
						<el-table-column align="center" prop="userId" label="用户名"></el-table-column>
						<el-table-column align="center" prop="name" label="姓名"></el-table-column>
					</el-table>
					<!-- 头像区 待开发 -->
					<el-card id="card-avatar">
						<div>
							<el-avatar :size="70" shape="square" class="avatar">头像</el-avatar>
						</div>
					</el-card>
					<!-- 用户信息表单 可修改 -->
					<el-table border :data="tableInfo">
						<el-table-column prop="major" label="专业"></el-table-column>
						<el-table-column prop="grade" label="年级"></el-table-column>
						<el-table-column fixed="right" label="操作" width="50">
							<template slot-scope="scope">
								<!-- 操作1：修改用户资料 -->
								<el-tooltip class="item" effect="dark" content="修改个人资料" placement="top" :enterable="false">
									<el-button @click="showEditDialog(scope.row.id)" type="primary" icon="el-icon-edit" size="mini" circle></el-button>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>

					<!-- 修改个人资料对话框 -->
					<el-dialog title="修改个人资料" :visible.sync="EditDialogVisible" width="50%" @close="EditDialogClose()">
						<!-- 修改信息表单区 -->
						<el-form :model="EditForm" :rules="EditFormRules" ref="EditFormRef" label-width="70px">
							<el-form-item label="专业" prop="major">
								<el-input v-model="EditForm.major"></el-input>
							</el-form-item>
							<el-form-item label="年级" prop="grade">
								<el-input v-model="EditForm.grade"></el-input>
							</el-form-item>
						</el-form>
						<!-- 按钮区 -->
						<span slot="footer">
							<el-button @click="EditDialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="EditClick()">确 定</el-button>
						</span>
					</el-dialog>

				</el-card>
			</el-col>
			<!-- @同班同学 -->
			<el-col :span="12">
				<el-card class="card-cmy">

					<!-- 功能提示按钮 -->
					<div class="box">
						<div class="top">
							<el-tooltip class="item" effect="dark" content="同班同学 @陈明阳" placement="top">
								<el-button>同班同学</el-button>
							</el-tooltip>
						</div>
					</div>

					<!-- 分页 -->
					<div class="block">
						<!-- 
						 @size-change:监听 pagesize 改变的事件——查看handleSizeChange（）
						 @current-change：监听 pagenum 改变的事件——查看handleCurrentChange（）
						 current-page:当前显示的的是 queryInfo.pageNum 的页数
						 page-sizes：为下拉菜单提供size选择数字组
						 page-size：显示当前 queryInfo.pageSize 提供的页面size
						 layout：可以 隐藏/显示 后面写的功能
						 total：获取显示有多少条数据
						  -->
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
						 :page-sizes="[1, 2, 5, 40]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next" :total="total">
						</el-pagination>
					</div>

					<!-- 表格数据 -->
					<el-table max-height="250" stripe border :data="studentList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
					 style="width: 100%">
						<!--:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"-->
						<!--表头索引-->
						<el-table-column type="index"></el-table-column>
						<!--表头用户名-->
						<el-table-column label="用户名" prop="userId"></el-table-column>
						<!--表头姓名-->
						<el-table-column align="center" label="姓名" prop="name">
							<template slot-scope="scope">
								<div slot="reference">
									<el-tag size="medium">{{ scope.row.name }}</el-tag>
								</div>
							</template>
						</el-table-column>
						<!--表头学号-->
						<el-table-column label="学号" prop="number"></el-table-column>
						<!--表头班级-->
						<el-table-column label="班级" prop="clas"></el-table-column>

						<el-table-column align="right">
							<!-- 搜索区 -->
							<template slot="header" slot-scope="scope">
								<el-input clearable v-model="search" size="mini" placeholder="输入姓名搜索" />
							</template>
							<!-- 数据按钮区 -->
							<template slot-scope="scope">
								<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> -->
								<!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
							</template>

						</el-table-column>

					</el-table>

				</el-card>
			</el-col>
		</el-row>

		<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓裴萌洁作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
		<!-- 裴萌洁： 交易 -->
		<el-card>
			<div class="box">
				<div class="top">
					<el-tooltip class="item" effect="dark" content="交易内容" placement="top">
						<el-button>交 易</el-button>
					</el-tooltip>
				</div>
			</div>
			<el-card>
				<el-row :gutter="10">
					<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
						我的商品收藏
					</el-button>


					<el-drawer title="我收藏的商品" :visible.sync="drawer" :with-header="false">
						<span>我收藏的商品</span>
					</el-drawer>

					<el-col :span="4">
						<el-button type="primary" @click="addDialogVisible3=true">＋ 发布物品</el-button>
					</el-col>

					<el-dialog title="基本信息" :visible.sync="addDialogVisible3">
						<el-form :model="form" :rules="formRules" ref="FormRef" label-width="100px" label-position="top">
							<el-form-item label="商品名称" prop="name">
								<el-input v-model="form.name"></el-input>
							</el-form-item>
							<el-form-item label="商品价格" prop="price">
								<el-input v-model="form.price" type="number"></el-input>
							</el-form-item>
							<el-form-item label="发布者" prop="poster">
								<el-input v-model="form.poster"></el-input>
							</el-form-item>
							<el-form-item label="商品描述" prop="description">
								<el-input v-model="form.description"></el-input>
							</el-form-item>
							<el-form-item label="商品分类" prop="sort">
								<el-cascader v-model="form.sort" :options="cateList" :props="cascaderProps"></el-cascader>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click=" addDialogVisible3= false">取 消</el-button>
							<!-- 添加商品 -->
							<el-button type="primary" class="btnAdd" @click="addGoods">确定</el-button>
						</div>
					</el-dialog>
				</el-row>

				<el-table :data="goodsList" style="width: 100%">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="商品名称">
									<span>{{ props.row.name }}</span>
								</el-form-item>
								<el-form-item label="价格(元)">
									<span>{{ props.row.price }}</span>
								</el-form-item>
								<el-form-item label="商品 ID">
									<span>{{ props.row.id }}</span>
								</el-form-item>
								<el-form-item label="发布者">
									<span>{{ props.row.poster }}</span>
								</el-form-item>
								<el-form-item label="商品分类">
									<span>{{ props.row.sort }}</span>
								</el-form-item>
								<el-form-item label="商品描述">
									<span>{{ props.row.description }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column label="商品 ID" prop="id">
					</el-table-column>
					<el-table-column label="商品名称" prop="name">
					</el-table-column>
					<el-table-column label="商品价格" prop="price">
					</el-table-column>
					<el-table-column label="发布者" prop="poster">
					</el-table-column>

					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>

							<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-dialog title="基本信息" :visible.sync="handleEditDialogVisible" width="75%" @close="handleEditDialogClose()">
					<el-form :model="handleEditForm" :rules="handleEditFormRules" ref="handleEditFormRef" label-width="100px"
					 label-position="top">
						<el-form-item label="商品名称" prop="name">
							<el-input v-model="handleEditForm.name"></el-input>
						</el-form-item>
						<el-form-item label="商品价格" prop="price">
							<el-input v-model="handleEditForm.price" type="number"></el-input>
						</el-form-item>
						<el-form-item label="发布者" prop="poster">
							<el-input v-model="handleEditForm.poster"></el-input>
						</el-form-item>
						<el-form-item label="商品描述" prop="description">
							<el-input v-model="handleEditForm.description"></el-input>
						</el-form-item>
						<el-form-item label="商品分类" prop="sort">
							<el-cascader v-model="handleEditForm.sort" :options="cateList" :props="cascaderProps"></el-cascader>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="handleEditDialogVisible= false">取 消</el-button>
						<!-- 修改商品 -->
						<el-button type="primary" class="btnAdd" @click="handleEditClick()">确定</el-button>
					</div>
				</el-dialog>


				<!-- 交易分页区域 -->
				<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="queryInfo2.pageNum"
				 :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo2.pageSize" layout="total, sizes, prev, pager, next, jumper"
				 :total="totalG" background>
				</el-pagination>
			</el-card>
			<!-- 商铺小吃 -->
			<el-card>
				<div class="box">
					<div class="top">
						<el-tooltip class="item" effect="dark" content="基本信息" placement="top-start">
							<el-button>我的商铺</el-button>
						</el-tooltip>
					</div>
				</div>
				<el-row :gutter="25">

					<el-button @click="drawer2 = true" type="primary" style="margin-left: 16px;">
						我的商铺收藏
					</el-button>

					<el-drawer title="我收藏的商铺" :visible.sync="drawer2" :with-header="false">
						<span>我收藏的商铺</span>
					</el-drawer>
					<el-col :span="6">
						<el-button type="primary" @click="addDialogVisible2=true">创建我的商铺</el-button>
					</el-col>
					<el-dialog title="添加商铺" :visible.sync="addDialogVisible2" width="40%" @close="addDialogClosed">
						<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="90px">
							<el-form-item label="商品名" prop="businessname">
								<el-input v-model="addForm.businessname"></el-input>
							</el-form-item>
							<el-form-item label="所属商铺" prop="shopname">
								<el-input v-model="addForm.shopname"></el-input>
							</el-form-item>
							<el-form-item label="商铺ID" prop="shopID">
								<el-input v-model="addForm.shopID"></el-input>
							</el-form-item>
							<el-form-item label="商品价格" prop="businessprice">
								<el-input v-model="addForm.businessprice"></el-input>
							</el-form-item>
							<el-form-item label="商铺地址" prop="shopaddress">
								<el-input v-model="addForm.shopaddress"></el-input>
							</el-form-item>

						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="addDialogVisible2 = false">取 消</el-button>
							<el-button type="primary" @click="addShop">确 定</el-button>
						</span>
					</el-dialog>
				</el-row>
				<!-- 表格数据 -->
				<div class="line"></div>

				<el-table :data="shopList" style="width: 100%">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="商品名称:">
									<span>{{ props.row.businessname }}</span>
								</el-form-item>
								<el-form-item label="商铺名称:">
									<span>{{ props.row.shopname}}</span>
								</el-form-item>
								<el-form-item label="商铺 ID:">
									<span>{{ props.row.shopID }}</span>
								</el-form-item>
								<el-form-item label="商铺地址:">
									<span>{{ props.row.shopaddress }}</span>
								</el-form-item>
								<el-form-item label="商品价格:">
									<span>{{ props.row.businessprice}}</span>
								</el-form-item>
								<el-form-item label="所剩商品数量:">
									<span>{{ props.row.businessmany }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column label="商铺名称" prop="shopID">
					</el-table-column>
					<el-table-column label="商品名称" prop="businessname">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<!-- 修改按钮 -->
							<el-tooltip class="item" effect="dark" content="修改用户" placement="top" :enterable="false">
								<el-button type="primary" icon="el-icon-edit" circle></el-button>
							</el-tooltip>
							<!-- 删除按钮 -->
							<el-tooltip class="item" effect="dark" content="删除用户" placement="top" :enterable="false">
								<el-button type="danger" icon="el-icon-delete" circle @click="deleteShopList(scope.row.shopID)"></el-button>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				</el-row>

				<!-- 搜索添加区域 -->

				<!--分页区-->
				<el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3" :current-page="queryInfo3.pageNum"
				 :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo3.pageSize" layout="total, sizes, prev, pager, next, jumper"
				 :total="totalS">
				</el-pagination>


				<el-row>
					<el-col :span="8">
						<el-card :body-style="{ padding: '0px' }">
							<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
							<div style="padding: 14px;">
								<span>好滋好味鸡蛋仔</span>
								<div class="bottom clearfix">
									<time class="time">{{ currentDate }}</time>
									<el-button type="text" class="button">点击查看</el-button>
								</div>
							</div>
						</el-card>
					</el-col>

					<el-col :span="8">
						<el-card :body-style="{ padding: '0px' }">
							<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
							<div style="padding: 14px;">
								<span>好滋好味奶茶</span>
								<div class="bottom clearfix">
									<time class="time">{{ currentDate }}</time>
									<el-button type="text" class="button">点击查看</el-button>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
		</el-card>
		<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑裴萌洁作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->


		<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓黄靖作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
		
		

		<!-- 社交 -->
		<el-card>
			<div class="box">
				<div class="top">
					<el-tooltip class="item" effect="dark" content="社交活动" placement="top">
						<el-button>社 交</el-button>
					</el-tooltip>
				</div>
			</div>
			
			<!-- 群组 -->
			<el-card>
				我 加 入 的 群 组
				<el-row :gutter="20">
					<el-col :span="20">
					<!-- 添加区域 -->																		
					</el-col>
					<el-col :span="3">
						<el-button type="primary" @click="addDialogVisible4=true">创建群组</el-button>
					</el-col>
					
					<el-dialog title="创建群聊" :visible.sync="addDialogVisible4">
						<el-form :model="GroupForm" :rules="GroupRules" ref="GroupFormRef" label-width="100px" label-position="top">
							
							<el-form-item label="群聊名称" prop="name">
								<el-input v-model="GroupForm.name"></el-input>
							</el-form-item>
							
							<el-form-item label="最大人数" prop="number">
								<el-input v-model.number="GroupForm.number" prefix-icon="iconfont iconrenshu"></el-input>
								<span id="numberInfo"></span>
							</el-form-item>
							
							<el-form-item prop="groupType">
							    <el-select v-model="GroupForm.groupType">
							        <el-option label="同学同事" value="同学同事"></el-option>
								    <el-option label="兴趣爱好" value="兴趣爱好"></el-option>
								    <el-option label="游戏社区" value="游戏社区"></el-option>
							        <el-option label="学习考试" value="学习考试"></el-option>
								    <el-option label="生活休闲" value="生活休闲"></el-option>
									<el-option label="行业交流" value="行业交流"></el-option>
							    </el-select>
							  </el-form-item>
							
							<el-form-item class="btns" align="center">
							   <el-button type="primary" @click="addGroup()">注册</el-button>
								<el-button @click=" addDialogVisible4= false">取 消</el-button>
							</el-form-item>
						</el-form>	
					</el-dialog>
					
				</el-row>
				<!-- 群组列表区域 -->
				<el-table :data="groupList">
					<el-table-column label="群名称" prop="name"></el-table-column>
					<el-table-column label="类型" prop="groupType"></el-table-column>
					<el-table-column label="最大人数" prop="number"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							
						  <el-button
						    size="mini"
							type="primary"
						    @click="handleDetails(scope.$index, scope.row)">查看</el-button>
							<!-- scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
							<el-button
							  size="mini"
							  type="danger"
							@click="exitGroup()">退出</el-button>  
						</template>
					</el-table-column>
				</el-table>
				
				<!--分页区-->			
				<el-pagination
					@size-change="handleSizeChange6" 
					@current-change="handleCurrentChange6" 
					:current-page="queryInfo6.pageNum"
					:page-sizes="[5,10]" 
					:page-size="pageSize" 
					layout="total, sizes, prev, pager, next, jumper" 
					:total="groupList.length">
				</el-pagination>
				
				
				
				</el-card>	
				
				
		</el-card>
		
		<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑黄靖作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->

	</div>

</template>

<script>
	export default {
		created() {
			// 陈明阳
			this.InitInfo(); //A初始化获取用户基本信息
			this.getStudentListByClas(); //B获取学生列表

			// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓裴萌洁作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
			this.getGoodsListByStudentId();
			this.getShopList();
			this.getShop();
			// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑裴萌洁作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->


			// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓黄靖作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
			this.getGroupList();
			// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑黄靖作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->

		},
		data() {
			return {

				// 陈明阳
				tableInfo: [], //用户信息表单
				queryInfo: {
					//和后端QueryInfo实体的属性一致
					query: JSON.parse(window.sessionStorage.getItem('userInfo')).class,
					pageNum: 1,
					pageSize: 5,
				},
				studentList: [], //B学生列表
				total: 0, //B总记录数
				search: '', //B查询表单数据
				EditDialogVisible: false, //C默认修改对话框不显示
				EditForm: { //C修改资料的表单数据
					major: '',
					grade: ''
				},
				EditFormRules: { //C修改资料的表单验证规则
					major: [{
							required: true,
							message: '请输入专业',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 4,
							message: '长度在二到四之间',
							trigger: 'blur'
						}
					],
					grade: [{
							required: true,
							message: '请输入年级',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 4,
							message: '长度在二到四之间',
							trigger: 'blur'
						}
					]
				},

				// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓裴萌洁作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->

				//裴萌洁
				currentDate: new Date(),
				drawer: false,
				drawer2: false,
				// 商品列表
				goodsList: [],
				// 商品总数
				totalG: 0,
				formLabelWidth: '120px',
				addDialogVisible3: false,
				handleEditDialogVisible: false,
				form: {
					name: '',
					price: 0,
					poster: '',
					description: '',
					sort: '',
					studentid: JSON.parse(window.sessionStorage.getItem('userInfo')).id,
				},
				formRules: {
					name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入商品价格',
						trigger: 'blur'
					}],
					poster: [{
						required: true,
						message: '请输入发布者',
						trigger: 'blur'
					}],
					description: [{
						required: true,
						message: '请输入商品描述',
						trigger: 'blur'
					}],
					sort: [{
						required: true,
						message: '请选择商品分类',
						trigger: 'blur'
					}]
				},
				cateList: [{
					cat_id: '数码电子',
					cat_name: '数码电子'
				}, {
					cat_id: '日用百货',
					cat_name: '日用百货'
				}, {
					cat_id: '化妆品',
					cat_name: '化妆品'
				}, {
					cat_id: '食品',
					cat_name: '食品'
				}, {
					cat_id: '书籍',
					cat_name: '书籍'
				}, {
					cat_id: '文具',
					cat_name: '文具'
				}, {
					cat_id: '玩具',
					cat_name: '玩具'
				}],

				handleEditForm: {
					name: '',
					price: '',
					poster: '',
					description: '',
					sort: '',
					studentid: JSON.parse(window.sessionStorage.getItem('userInfo')).id,
				},
				handleEditFormRules: {
					name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入商品价格',
						trigger: 'blur'
					}],
					poster: [{
						required: true,
						message: '请输入发布者',
						trigger: 'blur'
					}],
					description: [{
						required: true,
						message: '请输入商品描述',
						trigger: 'blur'
					}],
					sort: [{
						required: true,
						message: '请选择商品分类',
						trigger: 'blur'
					}]
				},

				queryInfo2: {
					id: JSON.parse(window.sessionStorage.getItem('userInfo')).id,
					pageNum: 1,
					pageSize: 5,
				},
				/**/
				// 级联选择器配置
				cascaderProps: {
					expandTrigger: 'hover',
					label: 'cat_name',
					value: 'cat_id',
					children: 'children'
				},
				//商铺
				totalS: 0,
				formLabelWidth: '120px',
				tableInfo1: [{}],
				queryInfo3: {
					query: '',
					//JSON.parse(window.sessionStorage.getItem('shop')).t_shop */
					//当前的页数
					pageNum: 1,
					//当前每页显示多少条数据
					pageSize: 2,
				},
				ShopList: [],
				shopList: [],
				addDialogVisible2: false,
				editDialogVisible: false,
				search: '',
				ststus: 200,
				editForm: {},
				addForm: {
					businessname: '',
					shopname: '',
					shopID: '',
					businessprice: '',
					shopaddress: '',
					businessmany: '',
				},
				addFormRules: {
					businessname: [{
						required: true,
						message: "请输入商品名",
						trigger: 'blur'
					}],
					shopname: [{
						required: true,
						message: "请输入所属商铺",
						trigger: 'blur'
					}, ],
					shopID: [{
						required: true,
						message: "请输入商铺ID",
						trigger: 'blur'
					}, ],
					shopaddress: [{
						required: true,
						message: "请输入商铺地址",
						trigger: 'blur'
					}],
					businessprice: [{
						required: true,
						message: "请输入商品价格",
						trigger: 'blur'
					}],
					businessmany: [{
						required: true,
						message: "请输入剩余商品数量",
						trigger: 'blur'
					}]
				},
				//裴萌洁
				// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑裴萌洁作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->


				// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓黄靖作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
				groupList:[],
				queryInfo6:{
						query: '',
						pageNum: 1,
						pageSize: 1,
						},
						total6:0,
						currentPage: 1,
						pageSize: 2,
						addDialogVisible4: false,
					
					GroupForm:{
						name:"",
						number:"",
						groupType:"请选择群组类型"
					},
					
					GroupRules:{
						name:[
							{ required: true, message: '群组名称为必填项目', trigger: 'blur' },
							{ min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
						],
						number:[
							{ type: 'number', required: true, message: '群组成员数量必须为数字类型', trigger: 'blur' },
						],
					},
				// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑黄靖作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->

			}
		},

		methods: {

			//陈明阳 7
			async InitInfo() { //A获取用户基本信息（从session里） A.2 发送请求获取
				const {
					data: resString
				} = await this.$http.get('getNewInfo');
				let arr = [];
				arr.push(JSON.parse(resString).student);
				this.tableInfo = arr;
			},
			async getStudentListByClas() { //B获取学生列表
				const {
					data: resString
				} = await this.$http.get("getByClas", {
					params: this.queryInfo
				});
				var res = JSON.parse(resString); //json转换为js对象
				//console.log(res.data)
				this.studentList = res.data; //data和后端res.put("data", Students)保持一致
				this.total = res.numbers; //numbers和后端res.put("numbers", numbers)保持一致
			},
			handleSizeChange(newSize) { //B监听 pagesize 改变的事件
				// console.log(newSize);//控制台打印：选择不同size的变化
				this.queryInfo.pageSize = newSize; //将选择的不同的size重新赋值给pageSize
				this.getStudentListByClas(); //让它带着新的数据去查询
			},
			handleCurrentChange(newPage) { //B监听页码值改变的事件
				// console.log(newPage);
				this.queryInfo.pageNum = newPage;
				this.getStudentListByClas();
			},
			async showEditDialog(id) { //C控制修改资料对话框的显示
				//该方法实现三个主要功能：
				// 1.显示编辑对话框
				// 2.发送请求获取最新用户数据
				// 3.将数据渲染在表单上
				this.EditDialogVisible = true; // 1.显示编辑对话框
				const {
					data: res
				} = await this.$http.get('getupdate?id=' + id); // 2.发送请求获取最新用户数据
				this.EditForm = JSON.parse(res); //3.将数据渲染在表单上
			},
			EditClick() {

				this.$refs.EditFormRef.validate(async valid => {
					var _this = this;
					if (valid) { //校验成功->发送编辑请求
						const {
							data: res
						} = await this.$http.put('editInfo', this.EditForm); //发送请求

						if (JSON.parse(res).flag != "success") return this.$notify.error({
							title: '编辑请求提示',
							message: '编辑失败'
						});

						window.sessionStorage.removeItem('userInfo');
						const {
							data: userInfo
						} = await this.$http.get('getUserInfo');
						window.sessionStorage.setItem("userInfo", userInfo);
						this.InitInfo();

						const h = this.$createElement; //使用这个可以定制message
						this.$notify({
							type: 'success',
							duration: 3000,
							title: '编辑请求提示',
							message: h('i', {
								style: 'color: teal'
							}, '编辑成功'),
						});

						this.EditDialogVisible = false;


					} else {
						this.$notify.error({
							title: '校验提示', //标题
							message: '数据校验不符，请检查',
						});
					}
				})
				// this.EditDialogVisible=false;
			},
			EditDialogClose() { //C关闭编辑对话框
				//关闭后清空校验提示
				this.$refs.EditFormRef.resetFields();
			},

			// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓裴萌洁作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
			//裴萌洁
			// 根据分页获取对应的商品列表
			async getGoodsListByStudentId() {
				const {
					data: resString2
				} = await this.$http.get('products2', {
					params: this.queryInfo2
				})
				var res2 = JSON.parse(resString2); //json转换为js对象
				this.goodsList = res2.data;
				this.totalG = res2.numbers;
			},
			handleSizeChange2(newSize) {
				console.log('newSize:', newSize);
				this.queryInfo2.pageSize = newSize
				this.getGoodsListByStudentId()
			},
			handleCurrentChange2(newPage) {
				console.log('newPage:', newPage);
				this.queryInfo2.pageNum = newPage
				this.getGoodsListByStudentId()
			},
			//通过id修改商品
			async handleEdit(id) {

				this.handleEditDialogVisible = true;
				//console.log(id);
				const {
					data: res
				} = await this.$http.get('getupdateproduct?id=' + id); // 2.发送请求获取最新用户数据
				const res2 = JSON.parse(res); //3.将数据渲染在表单上
				res2.sort = null;
				this.handleEditForm = res2;
			},
			handleEditClick() {

				this.$refs.handleEditFormRef.validate(async valid => {
					var _this = this;
					//console.log(_this);
					if (valid) { //校验成功->发送编辑请求					

						const editform = _.cloneDeep(this.handleEditForm)
						editform.sort = editform.sort.join(',')


						const {
							data: res
						} = await this.$http.put('editproduct', editform); //发送请求

						if (JSON.parse(res).flag != "success") return this.$notify.error({
							title: '编辑请求提示',
							message: '编辑失败'
						});

						//window.sessionStorage.removeItem('userInfo');
						//const {data:userInfo} = await this.$http.get('getUserInfo');
						//window.sessionStorage.setItem("userInfo",userInfo);
						this.getGoodsListByStudentId();

						const h = this.$createElement; //使用这个可以定制message
						this.$notify({
							type: 'success',
							duration: 3000,
							title: '编辑请求提示',
							message: h('i', {
								style: 'color: teal'
							}, '编辑成功'),
						});

						this.handleEditDialogVisible = false;


					} else {
						this.$notify.error({
							title: '校验提示', //标题
							message: '数据校验不符，请检查',
						});
					}
				})
			},
			handleEditDialogClose() { //C关闭编辑对话框
				//关闭后清空校验提示
				this.$refs.handleEditFormRef.resetFields();
			},
			//通过Id删除商品
			async handleDelete(id) {
				console.log(id);
				// 弹框
				const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				// 成功删除为confirm 取消为 cancel
				if (confirmResult != 'confirm') {
					return this.$message.info("已取消删除");
				}
				const {
					data: res3
				} = await this.$http.delete("deleteByID?id=" + id);
				if (res3 != "success") {
					return this.$message.error("操作失败！！！");
				}
				this.$message.success("操作成功！！！");
				this.getGoodsListByStudentId();
			},
			handleSizeChange2(newSize) { //监听 pagesize 改变的事件
				// console.log(newSizex);//控制台打印：选择不同size的变化
				this.queryInfo2.pageSize = newSize; //将选择的不同的size重新赋值给pageSize
				this.getGoodsListByStudentId(); //让它带着新的数据去查询
			},
			handleCurrentChange2(newPage) { //监听页码值改变的事件
				// console.log(newPage);
				this.queryInfo2.pageNum = newPage;
				this.getGoodsListByStudentId();
			},
			addGoods() {
				this.$refs.FormRef.validate(async valid => {
					if (!valid) return this.$message.error('请填写必要的表单项！')
					// 发送请求前：需对提交的表单进行处理goods_cat attrs
					// this.addForm.goods_cat = this.addForm.goods_cat.join(',')
					// 以上写法不对：级联选择器绑定的对象goods_cat要求是数组对象
					// 解决办法: 包：lodash 方法（深拷贝）：cloneDeep(boj)

					// 将form进行深拷贝
					const addForm = _.cloneDeep(this.form)
					addForm.sort = addForm.sort.join(',')
					// 发起请求添加商品
					// 商品名称必须是唯一的
					const {
						data: res
					} = await this.$http.post('addproducts', addForm)
					console.log(addForm)
					this.$message.success('添加商品成功!')
					this.addDialogVisible3 = false
					this.getGoodsListByStudentId()
				})
			},
			//商铺
			async getShopList() {
				const {
					data: resString
				} = await this.$http.get("shop", {
					params: this.queryInfo3
				}) //你这里发送请求url是shop？ //接收后台返回的String数据，访问后台""里面的东西是路径
				var res = JSON.parse(resString); //从字符串中解析resString对象
				//var res1 = JSON.parse(resString1);
				//console.log(resString); //在控制台输出信息
				//console.log(res.numbers);
				//console.log(res);//在控制台输出信息
				//console.log(res.shop);
				this.ShopList = res.shop;
				this.totalS = res.numbers;
				//打印
			},
			async getShop() {
				const {
					data: resString
				} = await this.$http.get("getShop", {
					params: this.queryInfo3
				});
				var res = JSON.parse(resString); //json转换为js对象
				//console.log(res.data)
				this.shopList = res.data; //data和后端res.put("data", Students)保持一致
				this.totalS = res.numbers; //numbers和后端res.put("numbers", numbers)保持一致
			},
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			addShop() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return this.$message.error('请填写必要项')
					//拷贝this.addForm
					console.log(this.addForm)
					//const form = _.clone(this.addForm)
					//form.sort = form.sort.join(',')
					// 发起请求添加商品
					// 商品名称必须是唯一的
					const {
						data: res
					} = await this.$http.post('addshop', this.addForm)
					//console.log(form)
					this.addDialogVisible2 = false
					this.$message.success('添加商铺成功') //笑死，写成"添加用户成功"了

					this.getShopList() //调用get函数
				})
			},
			handleSizeChange3(newSize) { //监听 pagesize 改变的事件
				console.log("页码", newSize); //控制台打印：选择不同size的变s化
				this.queryInfo3.pageSize = newSize; //将选择的不同的size重新赋值给pageSize
				this.getShop(); //让它带着新的数据去查询
			},

			handleCurrentChange3(newPage) { //监听页码值改变的事件
				console.log("页码", newPage);
				this.queryInfo3.pageNum = newPage;
				this.getShop();
			},
			//删除部分的实现
			async deleteShopList(shopID) {
				console.log(shopID);
				const confirmResult = await this.$confirm('此操作将永久删除该商铺, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (confirmResult != 'confirm') {
					return this.$message.info('已取消删除')

				}

				const {
					data: res
				} = await this.$http.delete("deleteShopID?shopID=" + shopID)
				//console.log(res);
				if (res != "success") {
					return this.$message.error("删除失败！");
				}
				this.$message.success("删除成功！！！");
				this.getShopList()
			},

			// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑裴萌洁作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
			
			
			// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓黄靖作业区间↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
			Create() {
				this.$router.push({path:"/Group/CreateGroup"});
			},
			
			async getGroupList() {
				const {data: res_j} = await this.$http.get("groups");
				var res = JSON.parse(res_j);//json转换为js对象
				//console.log(res);
				if(res.flag !=200){
					return this.$message.error("获取群组列表失败！");
				}
				this.groupList = res.groups;
			},	
			
			handleDetails(index,row){
				/* console.log(index,row);
				console.log(index);
				console.log(row); */	
				this.$router.push({
					path:"/Group/GroupDetails",
					query:{
						name: "ming",
						Rname:row.name,
						allInfo:row,
						},
					});
			},
			
			
			/* 分页功能的实现 */
			handleSizeChange6(val) {
			  console.log(`每页 ${val} 条`);
			  this.currentPage = 1;
			  this.pageSize = val;
			},
			handleCurrentChange6(val) {
			  console.log(`当前页: ${val}`);
			  this.currentPage = val;
			},
			
			/* 创建群组 */
			addGroup() {
				
				this.$refs.GroupFormRef.validate(async valid => {
					console.log(this.GroupForm);
					if (!valid) return;
					const {data:resString} = await this.$http.post("addgroup",this.GroupForm);//②接收后台返回的string数据：含有两块内容--flag和student <--| = |--> ①访问后台
					var res=JSON.parse(JSON.stringify(resString));//转换为json对象
					console.log(res);
					if (res == "ok"){
						this.addDialogVisible4 = false
						this.$message.success("创建成功！！！")		
					}else{
						this.$message.error("创建失败！！！")
					}
					})
			},
			
			/* 退出群组 */
			exitGroup() {
			        this.$confirm('确定要离开这个群吗?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.$message({
			            type: 'success',
			            message: '已退出!'
			          });
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消'
			          });          
			        });
			      },
				  
				  
			// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑黄靖作业区间↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
		}

	}
</script>


<style lang="less" scoped>
	//陈明阳
	#card-avatar {
		height: 80px;
		margin: 0;
	}

	.avatar {
		margin-top: -14px;
	}

	.card-cmy {
		// width: 800px;
		height: 400px;
	}

	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}

	.el-table {
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.el-checkbox {
		margin: 0 8px 0 0 !important;
	}

	.previewImg {
		width: 100%;
	}

	btnAdd {
		margin-top: 15px
	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}
</style>
